<!--vue模板-->
<template>
  <div>
    <el-form
      ref="addForm"
      :model="product"
      label-width="auto"
      style="
        max-width: 1000px;
        margin: auto;
        background-color: #fff;
        padding: 20px;
      "
    >
      <div
        style="
          background-color: #fff;
          height: 30px;
          line-height: 30px;
          border-bottom: solid 1px #ccc;
          margin-bottom: 10px;
        "
      >
        基础信息
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="产品编号:">
            <el-input v-model="product.productnumber" placeholder="请输入" style="margin-right: 20px; width: 350px"  />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品名称:">
            <el-input v-model="product.productname" placeholder="请输入" style="width: 350px"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="封面图:">
            <el-upload
              class="avatar-uploader"
              :action="host + '/upload'"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="轮播图:"> &nbsp; </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="close">取消</el-button>
    </div>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import host from "@/utils/env.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { saveProduct } from "@/api/product.js";

const router = useRouter();
const imageUrl = ref("");
const product = ref({
  productnumber: "",
  productname: "",
  coverimage: ""
});
//取消&&保存成功后也调用这个方法
function close() {
  router.push("/product/manage");
}
//上传前
const beforeAvatarUpload = rawFile => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("请选择jpg格式");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("图片不能超过10M!");
    return false;
  }
  return true;
};

//上传成功
const handleAvatarSuccess = (response, uploadFile) => {
  if (response.code == 200) {
    console.log("sssss",uploadFile)
    //显示图片
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
    //更改图片地址
    product.value.coverimage = imageUrl.value;
  }
};

async function save() {
  console.log(product.value);
  let res = await saveProduct(product.value);
  if (res.code == 200){
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    close();
  }

}
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
:deep(.avatar-uploader .avatar) {
  width: 108px;
  height: 108px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 108px;
  height: 108px;
  text-align: center;
}
</style>
